import { FC, useState, useEffect } from 'react';

import Image from '@/components/Image';
import ScrollModel from '@/components/ScrollModel';
import SimpleList from '@/components/SimpleList';
import Pie from '@/components/Pie';
import SwiperList from '@/components/SwiperList';
import BarLine from '@/components/BarLine';
import Line from '@/components/Line';
import Map from '@/components/Map';
import PdfPreviewer from '@/components/PdfPreviewer';
import Sunburst from '@/components/Sunburst';
import Bar from '@/components/Bar';
import DatePicker from '@/components/DatePicker';
import InTable from '@/components/InTable';
import { Button } from 'antd';
import xinnengyuanqiche from '@/assets/cyl/car1.png';
import classNames from 'classnames';
import _lodash from 'lodash';
import Socket from '@/utils/socket';

const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    render: (item: any) => (
      <p>
        {item.logo ? (
          <img
            src={item.logo}
            style={{
              width: 40,
              height: 20,
              objectFit: 'contain',
              objectPosition: 'center',
            }}
          />
        ) : null}
        <span>{item.title}</span>
      </p>
    ),
  },
  {
    title: '简介',
    dataIndex: 'desc',
  },
];
const listData: any = [];
for (let i = 0; i < 50; i++) {
  listData.push({
    title: `标题${i + 1}`,
    desc: `简介${i + 1}`,
    logo:
      i === 1
        ? 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
        : null,
  });
}

const sunburstData = [
  {
    name: '经开区',
    value: 400,
    children: [
      {
        name: '人才',
        value: 100,
        children: [
          {
            name: '经开区人才',
            value: 20,
          },
          {
            name: '经开区人才管理办法',
            value: 20,
          },
          {
            name: '经开区人才管理',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区人才管理',
            value: 20,
          },
        ],
      },
      {
        name: '税收',
        value: 100,
        children: [
          {
            name: '经开区税收',
            value: 20,
          },
          {
            name: '经开区税收管理办法',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区税收',
            value: 20,
          },
          {
            name: '经开区税收管理办法',
            value: 20,
          },
        ],
      },
      {
        name: '房屋',
        value: 100,
        children: [
          {
            name: '经开区房屋管理办法',
            value: 20,
          },
          {
            name: '经开区房屋',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区房屋管理办法',
            value: 20,
          },
          {
            name: '经开区房屋',
            value: 20,
          },
        ],
      },
      {
        name: '资金',
        value: 100,
        children: [
          {
            name: '经开区资金管理办法',
            value: 20,
          },
          {
            name: '经开区资金',
            value: 20,
          },
          {
            name: '经开区',
            value: 20,
          },
          {
            name: '经开区资金管理办法',
            value: 20,
          },
          {
            name: '经开区资金',
            value: 20,
          },
        ],
      },
    ],
  },
];

import styles from './style.less';
import classnames from 'classnames';
const Abc: FC<{ className?: string }> = (props) => {
  return <p className={props.className}>123</p>;
};
const Example: FC = () => {
  const socket = Socket.getInstance();

  socket.onMessage(function (e: any) {
    console.log(e);
    console.log('socket connected');
  });

  var abc: any[] = [
    {
      title: '语文',
      score: 0,
    },
    {
      title: '数学',
      score: 10,
    },
    {
      title: '英语',
      score: 20,
    },
    {
      title: '语文',
      score: 220,
    },
    {
      title: '数学',
      score: 30,
    },
    {
      title: '英语',
      score: 50,
    },
    {
      title: '语文',
      score: 70,
    },
    {
      title: '数学',
      score: 5,
    },
    {
      title: '英语',
      score: 40,
    },
  ];

  const test2 = (key: string = 'score') => {
    const newarr = _lodash.groupBy(abc, 'title');
    console.log(newarr);
    const result = [];
    for (let i in newarr) {
      result.push(
        newarr[i].sort((a: any, b: any) => {
          return b[key] - a[key];
        })[0],
      );
    }
    console.log(result);
  };

  const test3 = (key: string = 'score') => {
    const newobj: any = {};
    for (let i = 0; i < abc.length; i++) {
      const newkey = abc[i].title;
      if (!newobj[newkey]) {
        newobj[newkey] = abc[i];
      } else {
        console.log(newobj[newkey][key]);
        if (newobj[newkey][key] < abc[i][key]) {
          newobj[newkey] = abc[i];
        }
      }
    }
    console.log(Object.values(newobj));
  };

  useEffect(() => {
    // test2()
    // test3();
    const json = window.sessionStorage.getItem('rolesMenu') || '';
    console.log(JSON.parse(json));
  }, []);

  const [test, setTest] = useState<{ a: string; b: number }>({
    a: '123',
    b: 1,
  });
  return (
    <div
      style={{
        width: 1920,
        height: 992,
        overflow: 'hidden',
        overflowY: 'scroll',
        backgroundColor: 'rgba(0, 76, 173, .5)',
      }}
    >
      <Button
        onClick={() => {
          setTest({
            ...test,
            b: ++test.b,
          });
        }}
      >
        test
      </Button>
      <p>
        {test.a}
        {test.b}
      </p>
      <Abc className={styles.card1}></Abc>
      <Abc className={classnames(styles.card1, styles.card2)}></Abc>
      <Abc className={styles.card1}></Abc>
      <Abc></Abc>
      {/* <p>Image</p>
      <Image src={xinnengyuanqiche} scale={1}></Image>
      <p>ScrollModel</p> */}
      {/* <ScrollModel width={200} height={200}>
        <Image src={xinnengyuanqiche} scale={0.5}></Image>
      </ScrollModel> */}
      {/* <p>SimpleList</p>
      <SimpleList
        width={500}
        height={400}
        rowStyle={{
          height: 40,
        }}
        selected={(item: any, index: number) => {
          console.log(item);
          console.log(index);
        }}
        hover
        selectedIndex={0}
        sortNumber
        sortText="序号"
        columns={columns}
        dataSource={listData}
      ></SimpleList> */}
      {/* <p>Bar</p>
      <Pie
        title="工业总值产业链分布"
        dataSource={[
          {
            name: '智能网联道路产业链',
            value: 24,
          },
          {
            name: '新能源汽车（纯电）产业链',
            value: 25,
          },
          {
            name: '智能网联汽车产业链',
            value: 18,
          },
        ]}
        clockwise={true}
        colors={['#2DC5FF', ' #00FF8F', '#FFD355']}
        borderColors={['#063170', '#063170', '#063170']}
      ></Pie> */}
      {/* <p>带空隙的Pie</p>
      <Pie
        width={750}
        height={230}
        title="工业总值产业链分布"
        dataSource={[
          {
            name: '智能网联道路产业链',
            value: 24,
          },
          {
            name: '新能源汽车（纯电）产业链',
            value: 25,
          },
          {
            name: '智能网联汽车产业链',
            value: 18,
          },
        ]}
        clockwise={true}
        colors={['#2DC5FF', ' #00FF8F', '#FFD355']}
        borderColors="#063170"
        borderWidth={3}
        radius={[35, 60]}
        roseType={false}
        legend={{
          show: true,
          top: 'center',
          left: 380,
          orient: 'vertical',
          textStyle: {
            color: '#fff',
          },
        }}
        titlePosition={{
          bottom: 0,
          left: '30%',
        }}
        center={['20%', '30%']}
        boxStyle={{
          position: 'absolute',
          right: 50,
          top: 120,
        }}
      ></Pie> */}
      {/* <p>SwipperList</p>
      <SwiperList
        dataSource={[
          {
            name: '锂电池及原料',
            value: 595,
          },
          {
            name: '锂电池及原料',
            value: 595,
          },
          {
            name: '锂电池及原料',
            value: 595,
          },
        ]}
      ></SwiperList> */}
      {/* <p>BarLine</p>
      <BarLine
        category={[
          '2020.01',
          '2020.02',
          '2020.03',
          '2020.04',
          '2020.05',
          '2020.06',
          '2020.07',
          '2020.08',
          '2020.09',
          '2020.10',
          '2020.11',
          '2020.12',
        ]}
        dataSource={{
          line: [
            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
          ],
          bar: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
        }}
      ></BarLine> */}
      {/* <Line
        category={[
          '基础与新材料',
          '新一代技术信息',
          '机器人和智能制造',
          '生物技术和大健康',
          '都市',
          '高端汽车及新能源智能汽车',
        ]}
        dataSource={[
          {
            name: '邮件营销',
            data: [120, 132, 101, 134, 90, 230],
          },
          {
            name: '联盟广告',
            data: [220, 182, 100, 234, 290, 330],
          },
        ]}
        colors={['#00fffd', '#1999ff']}
        style={{
          position: 'absolute',
          right: 200,
          top: 600,
        }}
      ></Line> */}
      {/* <p>地图</p>
      <Map
        marker={{
          lng: 116.53,
          lat: 39.788,
          title: '测试地图信息',
          id: 1,
          type: '新一代信息技术',
        }}
      ></Map> */}
      {/* <p>pdf预览</p>
      <div
        style={{
          width: 600,
          height: 600,
        }}
      >
        <PdfPreviewer
          width={600}
          height={600}
          fileUrl="http://210.12.166.198:8081/api/allInOne/data/file/download?type=report&name=%E7%96%AB%E6%83%85%E4%B8%8B%E7%9A%84%E6%B1%BD%E8%BD%A6%E5%B8%82%E5%9C%BA%E5%88%86%E6%9E%90.pdf"
        />
      </div>
      <p>pdf预览失败</p>
      <div
        style={{
          width: 600,
          height: 600,
        }}
      >
        <PdfPreviewer
          width={600}
          height={600}
          fileUrl="http://210.12.166.198:8081/api/allInOne/preview/onlinePreview?url=http%3A%2F%2F127.0.0.1%3A8081%2Fapi%2FallInOne%2Fdata%2Ffile%2FgetFile%3Ftype%3Dreport%26name%3D%E7%96%AB%E6%83%85%E4%B8%8B%E7%9A%84%E6%B1%BD%E8%BD%A6%E5%B8%82%E5%9C%BA%E5%88%86%E6%9E%90.pdf%26fullfilename%3D%E7%96%AB%E6%83%85%E4%B8%8B%E7%9A%84%E6%B1%BD%E8%BD%A6%E5%B8%82%E5%9C%BA%E5%88%86%E6%9E%90.pdf"
        />
      </div> */}
      {/* <p>旭日图</p>
      <div>
        <Sunburst dataSource={sunburstData}></Sunburst>
      </div> */}
      {/* <p>柱状图</p>
      <Bar
        category={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
        dataSource={[
          {
            name: 'name',
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ]}
      ></Bar> */}
      {/* <p>DatePicker</p>
      <DatePicker
        style={{
          width: 200,
        }}
      ></DatePicker>
      <DatePicker type="range" style={{ width: 400 }}></DatePicker>*/}
    </div>
  );
};

export default Example;
